<template>
  <div id="rankId" class="rank-view" />
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { getAssetTrend } from '@/api/plant'
import * as echarts from 'echarts'

const props = defineProps({
  companyId: ''
})
const setChart = () => {
  var myChart = echarts.init(document.getElementById('rankId'))
  var option = {
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['农场1', '农场2', '农场3', '农场4', '农场5', '农场6'],
      axisLine: {
        // x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#69BDAA60',
          width: 1,
          type: 'solid',
        },
      },
      axisLabel: {
        show: true,
        color: '#69BDAA',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#86b7ac50'],
          width: 1,
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        // x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#69BDAA60',
          width: 1,
          type: 'solid',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#86b7ac50'],
          width: 1,
          type: 'dashed'
        }
      },
      axisLabel: {
        show: true,
        color: '#69BDAA',
      },
    },
    series: [
      // 顶部小菱形
      {
        type: 'pictorialBar',
        name: 'pictorial element',
        z: 10,
        data: [
          {
            value: 60,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切
            symbolSize: ['-100%', 12], // 根据柱子大小来做调整
            symbolRotate: 0,
            itemStyle: {
              // normal: {
              //   color: '#EE823490',
              // },
              // 渐变
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#F5AA0F60' },
                  { offset: 0.5, color: '#F5AA0F' },
                  { offset: 0.5, color: '#F5AA0F' },
                  { offset: 1, color: '#F5AA0F60' },
                ],
              },
            },
          },
          {
            value: 26,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切
            symbolSize: ['-100%', 12], // 根据柱子大小来做调整
            symbolRotate: 0,
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#B9BECE60' },
                  { offset: 0.5, color: '#B9BECE' },
                  { offset: 0.5, color: '#B9BECE' },
                  { offset: 1, color: '#B9BECE60' },
                ],
              },
            },
          },
          {
            value: 58,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切
            symbolSize: ['-100%', 12], // 根据柱子大小来做调整
            symbolRotate: 0,
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#B9818860' },
                  { offset: 0.5, color: '#B98188' },
                  { offset: 0.5, color: '#B98188' },
                  { offset: 1, color: '#B9818860' },
                ],
              },
            },
          },
          {
            value: 43,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切
            symbolSize: ['-100%', 12], // 根据柱子大小来做调整
            symbolRotate: 0,
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#01C6A960' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 1, color: '#01C6A960' },
                ],
              },
            },
          },
          {
            value: 89,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切
            symbolSize: ['-100%', 12], // 根据柱子大小来做调整
            symbolRotate: 0,
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#01C6A960' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 1, color: '#01C6A960' },
                ],
              },

            },
          },
          {
            value: 29,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切
            symbolSize: ['-100%', 12], // 根据柱子大小来做调整
            symbolRotate: 0,
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#01C6A960' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 1, color: '#01C6A960' },
                ],
              },
            },
          }
        ]
      },
      // 柱子数据
      {
        type: 'bar',
        name: '地图',
        barWidth: '40%',
        data: [
          {
            value: 60,
            symbolOffset: [0, 13],
            z: 2,
            label: {
              show: true,
              position: 'top',
              color: '#F5AA0F',
            },
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#F5AA0F50' },
                  { offset: 0.5, color: '#F5AA0F80' },
                  { offset: 0.5, color: '#F5AA0F' },
                  { offset: 1, color: '#F5AA0F80' },
                ],
              },
            }
          },
          {
            value: 26,
            symbolOffset: [0, 13],
            z: 2,
            label: {
              show: true,
              position: 'top',
              color: '#B9BECE',
            },
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#B9BECE50' },
                  { offset: 0.5, color: '#B9BECE60' },
                  { offset: 0.5, color: '#B9BECE' },
                  { offset: 1, color: '#B9BECE80' },
                ],
              },
            }
          },
          {
            value: 58,
            symbolOffset: [0, 13],
            z: 2,
            label: {
              show: true,
              position: 'top',
              color: '#B98188',
            },
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#B9818850' },
                  { offset: 0.5, color: '#B9818860' },
                  { offset: 0.5, color: '#B98188' },
                  { offset: 1, color: '#B9818880' },
                ],
              },
            }
          },
          {
            value: 43,
            symbolOffset: [0, 13],
            z: 2,
            label: {
              show: true,
              position: 'top',
              color: '#01C6A9',
            },
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#01C6A950' },
                  { offset: 0.5, color: '#01C6A960' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 1, color: '#01C6A980' },
                ],
              },
            }
          },
          {
            value: 89,
            symbolOffset: [0, 13],
            z: 2,
            label: {
              show: true,
              position: 'top',
              color: '#01C6A9',
            },
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#01C6A950' },
                  { offset: 0.5, color: '#01C6A960' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 1, color: '#01C6A980' },
                ],
              },
            }
          },
          {
            value: 29,
            symbolOffset: [0, 13],
            z: 2,
            label: {
              show: true,
              position: 'top',
              color: '#01C6A9',
            },
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0.1, color: '#01C6A950' },
                  { offset: 0.5, color: '#01C6A960' },
                  { offset: 0.5, color: '#01C6A9' },
                  { offset: 1, color: '#01C6A980' },
                ],
              },
            }
          }],
      },
      // 底部三角形
      // {
      //   type: 'pictorialBar',
      //   name: 'joy',
      //   barGap: '10%',
      //   z: 3,
      //   barWidth: 20,
      //   data: [
      //     {
      //       value: 10,
      //       symbol: 'diamond',
      //       symbolOffset: [0, 3],
      //       symbolSize: ['-100%', 25],
      //       symbolRotate: 270,
      //       itemStyle: {
      //         color: {
      //           x: 10,
      //           y: 0,
      //           x2: 0,
      //           y2: 0,
      //           type: 'linear',
      //           global: false,
      //           colorStops: [
      //             { offset: 0, color: '#bd530a' },
      //             { offset: 0.5, color: '#bd530a' },
      //             { offset: 0.5, color: '#ca7e06' },
      //             { offset: 1, color: '#ca7e06' },
      //           ],
      //         },
      //       },
      //     },
      //     {
      //       value: 10,
      //       symbol: 'diamond',
      //       symbolOffset: [0, 3],
      //       symbolSize: ['-100%', 25],
      //       symbolRotate: 90,
      //       itemStyle: {
      //         color: {
      //           x: 1,
      //           y: 0,
      //           x2: 0,
      //           y2: 0,
      //           type: 'linear',
      //           global: false,
      //           colorStops: [
      //             { offset: 0, color: '#bd530a' },
      //             { offset: 0.5, color: '#bd530a' },
      //             { offset: 0.5, color: '#ca7e06' },
      //             { offset: 1, color: '#ca7e06' },
      //           ],
      //         },
      //       },
      //     },
      //     {
      //       value: 10,
      //       symbol: 'diamond',
      //       symbolOffset: [0, 3],
      //       symbolSize: ['-100%', 25],
      //       symbolRotate: 90,
      //       itemStyle: {
      //         color: {
      //           x: 1,
      //           y: 0,
      //           x2: 0,
      //           y2: 0,
      //           type: 'linear',
      //           global: false,
      //           colorStops: [
      //             { offset: 0, color: '#bd530a' },
      //             { offset: 0.5, color: '#bd530a' },
      //             { offset: 0.5, color: '#ca7e06' },
      //             { offset: 1, color: '#ca7e06' },
      //           ],
      //         },
      //       },
      //     },
      //     {
      //       value: 10,
      //       symbol: 'diamond',
      //       symbolOffset: [0, 3],
      //       symbolSize: ['-100%', 25],
      //       symbolRotate: 90,
      //       itemStyle: {
      //         color: {
      //           x: 1,
      //           y: 0,
      //           x2: 0,
      //           y2: 0,
      //           type: 'linear',
      //           global: false,
      //           colorStops: [
      //             { offset: 0, color: '#bd530a' },
      //             { offset: 0.5, color: '#bd530a' },
      //             { offset: 0.5, color: '#ca7e06' },
      //             { offset: 1, color: '#ca7e06' },
      //           ],
      //         },
      //       },
      //     },
      //     {
      //       value: 10,
      //       symbol: 'diamond',
      //       symbolOffset: [0, 3],
      //       symbolSize: ['-100%', 25],
      //       symbolRotate: 90,
      //       itemStyle: {
      //         color: {
      //           x: 1,
      //           y: 0,
      //           x2: 0,
      //           y2: 0,
      //           type: 'linear',
      //           global: false,
      //           colorStops: [
      //             { offset: 0, color: '#bd530a' },
      //             { offset: 0.5, color: '#bd530a' },
      //             { offset: 0.5, color: '#ca7e06' },
      //             { offset: 1, color: '#ca7e06' },
      //           ],
      //         },
      //       },
      //     },
      //     {
      //       value: 10,
      //       symbol: 'diamond',
      //       symbolOffset: [0, 3],
      //       symbolSize: ['-100%', 25],
      //       symbolRotate: 90,
      //       itemStyle: {
      //         color: {
      //           x: 1,
      //           y: 0,
      //           x2: 0,
      //           y2: 0,
      //           type: 'linear',
      //           global: false,
      //           colorStops: [
      //             { offset: 0, color: '#bd530a' },
      //             { offset: 0.5, color: '#bd530a' },
      //             { offset: 0.5, color: '#ca7e06' },
      //             { offset: 1, color: '#ca7e06' },
      //           ],
      //         },
      //       },
      //     },
      //   ],
      // },
    ],
  }
  myChart.clear()
  myChart.resize()
  myChart.setOption(option)
}
onMounted(async() => {
  setChart()
  window.onresize = () => {
    setChart()
  }
})
</script>
<style lang="scss">
.rank-view{
    width: 100%;
    height: 100%;
    position:absolute;
}

</style>
